<template>
  <el-card style="margin: 5px">
    <el-row :gutter="500">
      <el-col :span="12">
        <el-input v-model="search" placeholder="搜索课程">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-button type="primary" size="mini" @click="courseAdd">添 加</el-button>
      <form action="http://localhost:8080/simhash/topFile/uploadfiles" method="post" enctype="multipart/form-data">
        <input id="folder" type="file" name="folder" multiple webkitdirectory>
        <button type="submit">上传</button>
      </form>
      <el-button type="primary" size="mini" @click="uploadfiles">上传文件夹</el-button>
    </el-row>

    <el-dialog title="添加课程" :visible.sync="dialogFormVisible" width="30%" size="small">
      <el-form label-width="120px">
        <el-form-item label="课程名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-row :gutter="20" style="margin-top: 10px;margin-right: 5px">
      <el-col :span="8" v-for="(item,index) in filterDataList.slice((currentPage-1)*sizePage,currentPage*sizePage)" :key="index">
        <el-card class="card_container" @click.native="showDetail(item)">
          <el-row>
            <el-col :span="22">
              <el-row class="card_left_top">
                {{ item.courseName }}
              </el-row>
              <el-row class="card_left_bottom">
                <el-col :span="2">
                  <img class="card_img" :src="avatar" alt="用户头像">
                </el-col>
                <el-col :span="7">
                  {{ item.teacherName }}
                </el-col>
                <el-col :span="2">
                  <i style="font-size: 20px" class="el-icon-s-home"/>
                </el-col>
                <el-col :span="12">
                  {{ item.courseClass }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <el-dropdown>
                <i class="el-icon-more-outline" style="color: #ffffff;font-size: 25px"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>置顶</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="text-align: center;margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[9, 18, 27]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filterDataList.length">
      </el-pagination>
    </el-row>
  </el-card>
</template>

<script>
import {queryCourseList,ClassAddFirst,FindClassId,addSecond,addTwo,theUploadfiles} from "@/api/teacher/course";
import { getUserProfile } from "@/api/system/user";
import {Now} from "@/api/student/topic"
export default {
  name: "course",
  data(){
    return {
      visible: false,
      form:{},
      form1:{},
      dialogFormVisible: false,
      courseList: [],
      avatar: '',
      filterDataList: [],
      currentPage: 1,
      sizePage: 9,
      search: '',
      originList: [],
      reme:''
    }
  },

  mounted() {
    this.avatar = this.$store.state.user.avatar

        getUserProfile().then(response =>{
          this.user = response.data;
    queryCourseList(this.user.userName).then(result => {
      if (result!==null){
        this.originList = result
        for (let i = 0;i<result.length;i++){
          if (result[i].sclass !== null){
            this.courseList.push({
              id: result[i].id,
              courseName: result[i].name,
              teacherName: result[i].teacher.nickname,
              courseClass: result[i].sclass.name
            })
          }else {
            this.courseList.push({
              id: result[i].id,
              courseName: result[i].name,
              teacherName: result[i].teacher.nickname,
              courseClass: '暂无选课信息'
            })
          }
        }
      }
      this.searchResource(this.search,this.courseList)
    })

      })
  },
  methods: {
    re(){
      this.avatar = this.$store.state.user.avatar

      getUserProfile().then(response =>{
        this.user = response.data;
        queryCourseList(this.user.userName).then(result => {
          if (result!==null){
            this.originList = result
            for (let i = 0;i<result.length;i++){
              if (result[i].sclass !== null){
                this.courseList.push({
                  id: result[i].id,
                  courseName: result[i].name,
                  teacherName: result[i].teacher.nickname,
                  courseClass: result[i].sclass.name
                })
              }else {
                this.courseList.push({
                  id: result[i].id,
                  courseName: result[i].name,
                  teacherName: result[i].teacher.nickname,
                  courseClass: '暂无选课信息'
                })
              }
            }
          }
          this.searchResource(this.search,this.courseList)
        })

      })
    },
    courseAdd(){
      this.dialogFormVisible = true
      this.form={}

    },
    uploadfiles(){
      theUploadfiles().then(response=>{

      })
    }
,

    save(){
      ClassAddFirst(this.form).then(response=>{

        if (response.code === 200){
          this.$message.success("添加课程成功")
          this.dialogFormVisible = false
          FindClassId(this.form.name).then(response=>{
             this.reme = response[0].id
            this.form1.name = this.form.name
            this.form1.classId = this.reme
            this.form1.teacherId = this.user.userName
            addTwo(this.form1).then(response=>{
              this.re();
            })
          })
        }else {
          this.$message.error("添加课程失败")
        }
      })
    },
    handleSizeChange(val) {
      this.sizePage = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    searchResource(search,data) {
      this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
      let filterKeywords = search.trim();
      this.filterDataList = data.filter(item => { //过滤全部数据
        if (item.courseName.includes(filterKeywords)) {//将符合条件的内容赋给filterDataShow
          return item
        }
      })
    },
    showDetail(item){
      let v = ''
      for (let i=0;i<this.originList.length;i++){
        if (this.originList[i].id === item.id){
          v = this.originList[i]
        }
      }
      // this.$router.push({ path:'../student/topic', query:{classId :v.classId}})
       this.$router.push({ path:'topic', query:{classId :v.classId}})
    }
  },
  watch: {
    search: {
      handler(){
        this.searchResource(this.search,this.courseList)
      }
    }
  }
}
</script>

<style scoped>
.card_container{
  background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  height: 120px;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s;/* 上浮这个过程需要的时间 */
}
.card_container:hover{
  box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
  transform: translate(0, -7px);/* 鼠标悬浮时盒子上移10px */
}
.card_left_top{
  color: #ffffff;
  font-size: 25px;
}
.card_left_bottom{
  color: #ffffff;
  font-size: 15px;
  margin-top: 25px;
}
.card_img {
  display: inline-block;
  margin-right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border: 1px solid #fff;
  box-shadow: 0 0 3px #ccc;
  overflow: hidden;
}
</style>
